<template>
  <a-card :bordered="false">
    <!--     查询区域-->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row type="flex">
          <a-col style="margin-left: 10px">
            <a-button icon="plus" style="margin-right: 20px;" type="primary" @click="openAdd()">新增</a-button>
            <a-divider style="margin-right: 20px" type="vertical"/>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="名称">
              <a-input v-model="queryParam.name" placeholder="请输入名称"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="联系人姓名">
              <a-input v-model="queryParam.contact" placeholder="请输入联系人姓名"></a-input>
            </a-form-item>
          </a-col>
<!--          {-->
<!--          "name": "名称",-->
<!--          "contact": "联系人姓名",-->
<!--          "mobile": "手机号",-->
<!--          "email": "邮箱",-->
<!--          "region": "区域",-->
<!--          "province": "省市",-->
<!--          "city": "城市",-->
<!--          "address": "详细地址",-->
<!--          "customer_code": "客户编码，用输入框就行",-->
<!--          "type": 1=零售 2=工程 3=咨询 4=服务,-->
<!--          }-->
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="手机号">
              <a-input v-model="queryParam.mobile" placeholder="请输入手机号"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px">
            <a-form-item label="邮箱">
              <a-input v-model="queryParam.email" placeholder="请输入邮箱"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="3" :sm="7"  v-show="toggleSearchStatus">
            <a-form-item label="区域">
              <a-select v-model="queryParam.region" placeholder="请输入区域">
                <a-select-option v-for="(i, index) in regionList" :key="index" :value="i.key"
                >{{ i.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px"  v-show="toggleSearchStatus">
            <a-form-item label="省市">
              <a-input v-model="queryParam.province" placeholder="请输入省/市"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px"  v-show="toggleSearchStatus">
            <a-form-item label="城市">
              <a-input v-model="queryParam.city" placeholder="请输入城市"></a-input>
            </a-form-item>
          </a-col>
<!--          <a-col :md="5" :sm="7" style="margin-left: 15px"  v-show="toggleSearchStatus">-->
<!--            <a-form-item label="详细地址">-->
<!--              <a-input v-model="queryParam.address" placeholder="请输入详细地址"></a-input>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
          <a-col :md="5" :sm="7" style="margin-left: 15px"  v-show="toggleSearchStatus">
            <a-form-item label="客户编码">
              <a-input v-model="queryParam.customer_code" placeholder="请输入客户编码"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="7" style="margin-left: 15px"  v-show="toggleSearchStatus">
            <a-form-item label="用户类型">
              <a-select v-model="queryParam.type" placeholder="请选择用户类型">
                <a-select-option v-for="(i, index) in typeList" :key="index" :value="i.key"
                >{{ i.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col flex="auto" >
             <span class="table-page-search-submitButtons"
                   style="float: left; overflow: hidden; margin-right: 20px">
               <a-button icon="search" style="margin-left: 10px" type="primary"
                         @click="searchQuery">查询
               </a-button>
               <a-popover :overlayStyle="{ background: 'white' }" placement="topLeft">
                 <template slot="content">
                            <a-icon theme="twoTone" two-tone-color="#52c41a" type="exclamation-circle"/><span
                   style="margin-left: 5px"
                 >可以点击重置来重新筛选结果</span
                 >
                 </template>
                 <a-button icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
                 <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
               </a-popover>
             </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <a-table
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="ipagination"
        bordered
        rowKey="id"
        size="middle"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a-button style="margin-right: 10px" type="primary" @click="handleEdit(record)"> 编辑 </a-button>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a-button> 删除 </a-button>
          </a-popconfirm>
        </span>

      </a-table>
      <members-modal ref="modalForm" @ok="modalFormOk"></members-modal>
    </div>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import MembersModal from '@views/newPages/membersModal'

export default {
  name: 'membersManagement',
  components: { MembersModal },
  mixins: [JeecgListMixin],
  data() {
    return {
      // queryParam: this.queryParamData,
      regionList: [
        { name: 'SOUTH', key: 'SOUTH' },
        { name: 'EAST', key: 'EAST' },
        { name: 'NORTH', key: 'NORTH' },
        { name: 'CENTRAL', key: 'CENTRAL' },
        { name: 'EAST2', key: 'EAST2' },
        { name: 'WEST', key: 'WEST' },
      ],
      //typrList 1=零售 2=工程 3=咨询 4=服务,
      typeList: [
        { name: '零售', key: '1' },
        { name: '工程', key: '2' },
        { name: '咨询', key: '3' },
        { name: '服务', key: '4' },
      ],
      toggleSearchStatus:false,
      confirmLoading: false,
      loading: false,
      title: '',
      visible: false,
      form: this.$form.createForm(this),
      dialogStyle: {
        top: '200px',
        // right:"20px",
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      columns: [
        {
          title: '名称',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '联系人姓名',
          align: 'center',
          dataIndex: 'contact',
        },
        {
          title: '手机号',
          align: 'center',
          dataIndex: 'mobile',
        },
        {
          title: '邮箱',
          align: 'center',
          dataIndex: 'email',
        },
        {
          title: '区域',
          align: 'center',
          dataIndex: 'region',
          customRender: (text, record, index) => {
            return this.regionList.find((item) => item.key === text).name
          },
        },
        {
          title: '省市',
          align: 'center',
          dataIndex: 'province',
        },
        {
          title: '城市',
          align: 'center',
          dataIndex: 'city',
        },
        {
          title: '详细地址',
          align: 'center',
          dataIndex: 'address',
        },
        {
          title: '客户编码',
          align: 'center',
          dataIndex: 'customer_code',
        },
        {
          title: '用户类型',
          align: 'center',
          dataIndex: 'type',
          customRender: (text, record, index) => {
            return this.typeList.find((item) => item.key === text).name
          },
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSource: [],
      url: {
        // list: '/api/vl/user/list',
        delete: '/carbon/carbonOverviewYearData/delete',
      }
    }
  },
  methods: {
    openAdd() {
      this.$refs.modalForm.add()
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
    handleToggleSearch(){
      this.toggleSearchStatus = !this.toggleSearchStatus;
    },
  },
}
</script>

<style scoped>

</style>